<template>
  <div class="user-center-container">
    <h2 class="page-title">系统介绍</h2>
    
    <div class="system-intro-card">
      <p>漏洞入侵检测系统是一个先进的安全防护平台，采用最新的机器学习算法，能够实时监测、分析和预警潜在的安全威胁。系统具备高准确率的漏洞识别能力，支持多种文件格式的安全扫描，并提供详细的分析报告。通过持续的数据收集和模型优化，系统不断提升检测能力，为网络安全提供可靠保障。</p>
    </div>

    <h2 class="page-title">用户日志</h2>
    
     <div class="log-table-container">
      <el-table v-loading="loading" :data="logData" border style="width: 100%" :header-cell-style="headerCellStyle" :cell-style="cellStyle" element-loading-text="加载中..." element-loading-background="rgba(255, 255, 255, 0.7)">
        <el-table-column prop="id" label="序号" width="80" align="center" />
        <el-table-column prop="uploadTime" label="上传时间" width="180" align="center" />
        <el-table-column prop="fileName" label="文件名称" align="center" />
        <el-table-column prop="accuracy" label="准确率" width="120" align="center">
          <template #default="scope">
            <span class="accuracy-value">{{ scope.row.accuracy }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="recallRate" label="召回率" width="120" align="center">
          <template #default="scope">
            <span class="recall-value">{{ scope.row.recallRate }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="lossRate" label="损失率" width="120" align="center">
          <template #default="scope">
            <span class="loss-value">{{ scope.row.lossRate }}</span>
          </template>
        </el-table-column>
      </el-table>
      
      <div class="pagination-container">
        <span class="total-info">共 {{ totalRecords }} 条记录</span>
        <div class="pagination-controls">
          <el-button size="small" @click="handlePrevPage" :disabled="currentPage === 1">上一页</el-button>
          <el-button type="primary" size="small" class="current-page">{{ currentPage }}</el-button>
          <el-button size="small" @click="handleNextPage" :disabled="isLastPage">下一页</el-button>
        </div>
      </div>
    </div>
    
    <div class="logout-container">
      <el-button class="logout-btn" @click="handleLogout">
        <el-icon><SwitchButton /></el-icon>
        退出登录
      </el-button>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, computed } from 'vue'
import { ElMessage } from 'element-plus'
import { SwitchButton } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'
import { useAuthStore } from '../../stores/auth'

const router = useRouter()
const authStore = useAuthStore()

import { getPredictionLogs } from '../../api/detection'

// 日志数据
const logData = ref([])
const loading = ref(false)
const currentPage = ref(1)
const pageSize = ref(10)
const totalRecords = ref(0)
const hasMore = ref(false)

// 获取日志数据
const fetchLogs = async () => {
  try {
    loading.value = true
    const skip = (currentPage.value - 1) * pageSize.value
    const response = await getPredictionLogs(skip, pageSize.value)
    if (response.code === 20000 && response.data) {
      const { items = [], pagination = {} } = response.data
      logData.value = items.map(log => ({
        id: log.id,
        uploadTime: log.created_at,
        fileName: log.dataset_name,
        accuracy: log.accuracy ? `${log.accuracy.toFixed(2)}%` : '0%',
        recallRate: log.recall_score ? `${log.recall_score.toFixed(2)}%` : '0%',
        lossRate: log.loss ? log.loss.toFixed(3) : '0.000'
      }))
      totalRecords.value = pagination.total || 0
      hasMore.value = pagination.has_more || false
    } else {
      ElMessage.error(response.data.message || '获取日志数据失败')
    }
  } catch (error) {
    console.error('获取日志数据失败:', error)
    ElMessage.error('获取日志数据失败，请稍后重试')
  } finally {
    loading.value = false
  }
}

// 初始化加载数据
fetchLogs()

// 表格样式
const headerCellStyle = {
  backgroundColor: '#F1F5FF',
  color: '#29386B',
  fontWeight: 'normal',
  borderBottom: '1px solid #EBEEF5',
  height: '40px',
  textAlign: 'center'
};

const cellStyle = ({row, column}) => {
  return { textAlign: 'center' };
};

// 计算是否为最后一页
const isLastPage = computed(() => {
  return !hasMore.value;
});

// 分页处理
const handlePrevPage = async () => {
  if (currentPage.value > 1) {
    currentPage.value--;
    await fetchLogs();
  }
};

const handleNextPage = async () => {
  if (hasMore.value) {
    currentPage.value++;
    await fetchLogs();
  }
};

// 退出登录
const handleLogout = () => {
  authStore.logout()
  ElMessage.success('已成功退出登录');
  // 跳转到登录页
  router.push('/login');
};
</script>

<style scoped>
.user-center-container {
  padding: 20px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  position: relative;
}

.page-title {
  font-size: 24px;
  font-weight: 500;
  color: #333;
  margin-bottom: 20px;
}

.system-intro-card {
  background-color: #f5f7fa;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 30px;
  border: 1px solid #e4e7ed;
}

.system-intro-card p {
  line-height: 1.6;
  color: #606266;
  margin: 0;
  text-align: justify;
}

.log-table-container {
  margin-bottom: 40px;
}

.accuracy-value {
  color: #67C23A;
  font-weight: 500;
}

.recall-value {
  color: #409EFF;
  font-weight: 500;
}

.loss-value {
  color: #E6A23C;
  font-weight: 500;
}

.pagination-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
}

.total-info {
  color: #606266;
  font-size: 14px;
}

.pagination-controls {
  display: flex;
  gap: 10px;
}

.current-page {
  pointer-events: none;
}

.logout-container {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}

.logout-btn {
  display: flex;
  align-items: center;
  padding: 10px 20px;
  background-color: #DD2726;
  color: white;
  border: none;
}

.logout-btn:hover {
  background-color: #c01e1d;
}

.logout-btn .el-icon {
  margin-right: 5px;
}

/* 表格样式 */
:deep(.el-table th.el-table__cell) {
  background-color: #F1F5FF !important;
  color: #29386B !important;
  font-weight: normal;
}

:deep(.el-table__row:hover) {
  background-color: #f5f7fa !important;
}

@media screen and (max-width: 768px) {
  .pagination-container {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
}
</style>